<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="timer">2019-11-10</div>
    <button>点击我</button>
    <!-- 切换图片 -->
    <button class="bjt">bjt</button>
    <button class="snb">snb</button>
    <img src="../images/5.webp" alt="白敬亭">
    <br>
    <!-- 分时问候  -->
    <img src="../images/早上好.webp" alt="" class="mon">
    <div class="good">早上好</div>
</body>
<script>
    var timer = document.getElementById('timer')
    var btn = document.querySelector('button')
    btn.onclick = function(){
        timer.innerHTML = '你好啊'
    }

    var bjt  =document.querySelector('.bjt')
    var snb = document.querySelector('.snb')
    var img = document.querySelector('img')
    bjt.onclick = function(){
        img.src='../images/5.webp'
        img.title = '白敬亭'
    }
    snb.onclick = function(){
        img.src = '../images/史努比.webp'
        img.title = '史努比'
    }
   var date = new Date()
   console.log(date);
   var h = date.getHours()
   console.log(h);
   var div = document.querySelector('.good')
   var img1  =document.querySelector('.mon')
   if(h<12){
    img1.src = '../images/早上好.webp'
    div.innerHTML = '早上好'
   }else if(h<18&&h>=12){
    img1.src = '../images/下午好.gif'
    div.innerHTML = '下午好'
   }else{
    img1.src = '../images/晚上好.gif'
    div.innerHTML = '晚上好'
   }
</script>
</html>